{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AdminLTE 3 | Log in</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href={% static 'adminlte/plugins/fontawesome-free/css/all.min.css' %}>
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href={% static 'adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}>
    <!-- Theme style -->
    <link rel="stylesheet" href={% static 'adminlte/dist/css/adminlte.min.css' %}>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href={% static 'adminlte/index2.html' %}><b>Admin</b>LTE</a>
    </div>
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">
            <p class="login-box-msg">请登录</p>

            <form action="{% url 'user:login' %}" method="post">
                {% csrf_token %}
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="用户名" name="username">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="密码" name="password">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-7">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" placeholder="验证码" name="authcode">
                            <span class="glyphicon glyphicon-barcode form-control-feedback"></span>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <img id="authImg" src="{% url 'user:get_auth_img' %}" alt="验证码"
                             style="height: 70%;width: 100%;"
                             class="offset-3"
                        >
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="icheck-primary">
                            <input type="checkbox" id="remember">
                            <label for="remember">
                                是否记住账号
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>


            <div class="social-auth-links text-center mb-3">
                <p>- OR -</p>
                <a href="#" class="btn btn-block btn-success">
                    <i class="fab fa-weixin mr-2"></i> 微信登录
                </a>
                <a href="{% url 'cas_ng_login' %}" class="btn btn-block btn-danger">
                    <i class="fab fa-uber mr-2"></i> CAS登录
                </a>
            </div>
            <!-- /.social-auth-links -->

            <p class="mb-1">
                <a href="{% static 'adminlte/pages/examples/forgot-password.html' %}">忘记密码</a>
            </p>
            <p class="mb-0">
                <a href="{% url 'user:register' %}" class="text-center">注册一个新账号!</a>
{#                <a href="#" class="text-center">注册一个新账号!</a>#}
            </p>
        </div>
        <!-- /.login-card-body -->
    </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src={% static 'adminlte/plugins/jquery/jquery.min.js' %}></script>
<!-- Bootstrap 4 -->
<script src={% static 'adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js' %}></script>
<!-- AdminLTE App -->
<script src={% static 'adminlte/dist/js/adminlte.min.js' %}></script>

<script>

    // 登录ajax请求
    $("#loginBtn").on("click", function () {
        var username = $("input[name=username]").val();
        var password = $("input[name=password]").val();
        var authcode = $("input[name=authcode]").val();
        var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
        if (!username) {
            $(".username-error").text("帐号不能为空！")
        }
        if (!password) {
            $(".password-error").text("密码不能为空！")
        }
        if (!authcode) {
            $(".authcode-error").text("请输入验证码")
        }
        $.ajax({
            url: "{% url 'user:login' %}",
            type: 'post',
            data: {
                username: username,
                password: password,
                authcode: authcode,
                csrfmiddlewaretoken: csrf_token,
            },
            success: function (res) {
                console.log(`res = ${res}`);
                if (res.status === "1") {
                    $(".authcode-error").text("验证码错误！")
                }
                if (res.status === "2") {
                    var href = location.search.slice(6);  //使用了auth的装饰器，会记录未登录用户想要访问的登录页面，登录成功后，会自动跳转过去
                    if (href) {
                        console.log(`登录成功，有目标地址: ${href}`);
                        location.href = href  //登录成功，有目标地址
                    } else {
                        {#location.href = "{% url 'index' %}"  // 登录成功没有目标地址，跳转主页#}
                        location.href = "{% static 'adminlte/index.html' %}"  // 登录成功没有目标地址，跳转主页
                    }
                }
                if (res.status === "3") {  // 帐号密码错误
                    console.log(`账号或密码错误！`);
                    $(".username-error").text("账号或密码错误！")
                }
            }
        })
    });

    // 验证码刷新
    $("#authImg").on("click", function () {
        $("#authImg")[0].src += "?" // 点击事件刷新验证码图片
    })
</script>

</body>
</html>
